<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="查找关键字" style="margin:0 10px 30px 0 ;width: 90%"/>
    <el-button type="primary" size="small"
               @click="append()"
               v-permission="'subject:add'">添加一级分类
    </el-button>
    <div style="width: 90%">
      <el-tree
        ref="tree2"
        :data="subjectList"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
        default-expand-all
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
          <span>
            <!--追加元素-->
            <el-button
              v-if="data.children"
              v-permission="'subject:add'"
              type="text"
              size="mini"
              @click="() => append(data)">
              添加
              <!--<i class="el-icon-circle-plus-outline"></i>-->
            </el-button>
            <!--更改元素-->
            <el-button
              v-permission="'subject:update'"
              type="text"
              size="mini"
              style="color: #515a6e"
              @click="() => update(node, data)">
              更新
              <!--<i class="el-icon-edit-outline"></i>-->
            </el-button>
            <!--删除元素-->
            <el-button
              v-permission="'subject:delete'"
              type="text"
              size="mini"
              style="color: #ed4014"
              @click="() => remove(node, data)">
              删除
              <!--<i class="el-icon-delete"></i>-->
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form >
        <el-form-item label="分类名称" label-width="120px">
          <el-input v-model="tempSubject.title" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus==='create'" type="success" @click="createOrAppendData">创 建</el-button>
        <el-button type="primary" v-else @click="updateData">修 改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {

    data() {
      return {
        filterText: '',
        subjectList: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        }
        , dialogFormVisible: false
        , textMap: {
          update: '编辑',
          create: '添加分类'
        }, dialogStatus: 'create'
        , tempSubject: {
        }
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val)
      }
    },
    created() {
      this.fetchNodeList()
    },
    methods: {
      //获取list
      fetchNodeList() {
        this.api({
          url: `/subject/getSubject`,
          method: "get"
        }).then(response => {
          console.log(response)
          if (response && response.length > 0) {
            this.subjectList = response

          }
        })
      },
      //搜索节点
      filterNode(value, data) {
        if (!value) return true
        return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
      },
      append(data) {
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
        this.tempSubject = {};
        if (data) this.tempSubject.id = data.id;
      },
      createOrAppendData() {
        if (!this.tempSubject.title) {
          return this.$message({
            type: 'warning',
            message: '请输入数据!'
          });
        }
        this.api({
          url: `/subject/addSubject`,
          method: "post",
          data: this.tempSubject
        }).then(data => {
          this.fetchNodeList()
          this.dialogFormVisible = false
          return this.$message({
            type: 'success',
            message: '添加成功!'
          });
        })
      },
      update(node, data) {
        this.dialogStatus = 'update';
        this.dialogFormVisible = true;
        this.tempSubject=Object.assign({},data);
        console.log(data)
        /*this.tempSubject.title = data.title;
        this.tempSubject.id = data.id;*/
      },
      updateData() {
        this.api({
          url: `/subject/updateSubject`,
          method: "post",
          data: this.tempSubject
        }).then(data => {
          this.fetchNodeList()
          this.dialogFormVisible = false
          return this.$message({
            type: 'success',
            message: '修改成功!'
          });
        })
      },
      remove(node, data) {
        if (data.children && data.children.length > 0) {//一级分类
          return this.$message({
            type: 'warning',
            message: '请先删除节点下的子分类!'
          });
        }
        console.log(node, data)
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.api({
            url: `/subject/deleteSubject/${data.id}`,
            method: "get",
          }).then(data => {
            this.fetchNodeList()
            this.dialogFormVisible = false
            return this.$message({
              type: 'success',
              message: '修改成功!'
            });
          })
        })

      }
    }
  }
</script>
<style scoped>
  /deep/ .el-tree-node__label {
    width: auto;
    float: right;
    font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 1px;
  }

  /deep/ .el-tree-node__content :hover {
    font-weight: bold;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

